<template>
  <van-search
      v-model="searchText"
      show-action
      shape="round"
      placeholder="输入关键词搜索伙伴"
  >
    <template #action>
      <div>
        <van-icon name="search" size="25"
                  color="#579CE2"
                  id="searchUserIcon"
                  @click="doSearchResult"/>
      </div>
    </template>
  </van-search>
  <van-divider>
    <van-highlight :keywords="keywordsOne"
                   :source-string="textOne"
                   v-if="activeIds.length !== 0"
                   id="keywordsSelectedTagsFontSize"/>
  </van-divider>
  <div v-if="activeIds.length === 0" id="selectTags">选择标签搜伙伴</div>
  <van-row gutter="10" style="padding: 8px">
    <van-col v-for="tag in activeIds">
      <van-tag closeable size="medium" type="primary" @close="doClose(tag)">
        {{ tag }}
      </van-tag>
    </van-col>
  </van-row>
  <van-divider>
    <van-highlight :keywords="keywordsTwo" :source-string="textTwo" id="keywordsSelectTagsFontSize"/>
  </van-divider>
  <van-tree-select
      v-model:active-id="activeIds"
      v-model:main-active-index="activeIndex"
      :items="tagList"
  />
</template>


<script setup lang="ts">

import { ref } from 'vue';
import {useRouter} from "vue-router";

const searchText = ref('');

const router = useRouter();
const textOne = '已选标签';
const textTwo = '选择标签'
const keywordsOne = '已选标签';
const keywordsTwo = '选择标签';

// /**
//  * 搜素过滤
//  */
// const onSearch = () => {
//   tagList.value = originTagList.map(parentTag => {
//     const tempChildren = [...parentTag.children];
//     const tempParentTag = {...parentTag};
//     tempParentTag.children = tempChildren.filter(item => item.text.includes(searchText.value));
//     return tempParentTag;
//   });
// };
//
// const onCancel = () => {
//   searchText.value == '';
//   tagList.value = originTagList;
//   showToast('已清空搜索词')
// };

//已选中的标签
const activeIds = ref([]);//默认不选中
const activeIndex = ref(0);

//原标签列表
const originTagList = [
  {
    text: '性别',
    children: [
      { text: '男', id: '男' },
      { text: '女', id: '女' },
    ],
  },
  {
    text: '年级',
    children: [
      { text: '初一', id: '初一' },
      { text: '初二', id: '初二' },
      { text: '初三', id: '初三' },
      { text: '高一', id: '高一' },
      { text: '高二', id: '高二' },
      { text: '高三', id: '高三' },
      { text: '高四', id: '高四' },
      { text: '大一', id: '大一' },
      { text: '大二', id: '大二' },
      { text: '大三', id: '大三' },
      { text: '大四', id: '大四' },
      { text: '研究生', id: '研究生' },
      { text: '博士生', id: '博士生' },
    ],
  },
  {
    text: '最近在学',
    children: [
      { text: 'Python', id: 'Python' },
      { text: 'C++', id: 'C++' },
      { text: 'Java', id: 'Java' },
      { text: 'C', id: 'C' },
      { text: 'C#', id: 'C#' },
      { text: 'JavaScript', id: 'JavaScript' },
      { text: 'Go', id: 'Go' },
      { text: 'SQL', id: 'SQL' },
      { text: 'Visual Basic', id: 'Visual Basic' },
      { text: 'Fortran', id: 'Fortran' },
      { text: 'Delphi/Object Pascal', id: 'Delphi/Object Pascal' },
      { text: 'PHP', id: 'PHP' },
      { text: 'Scratch', id: 'Scratch' },
      { text: 'Rust', id: 'Rust' },
      { text: 'MATLAB', id: 'MATLAB' },
      { text: 'R', id: 'R' },
      { text: 'Assembly Language', id: 'Assembly Language' },
      { text: 'Ruby', id: 'Ruby' },
      { text: 'COBOL', id: 'COBOL' },
      { text: 'Swift', id: 'Swift' },
    ],
  },
  {
    text: '目标',
    children: [
      { text: '考研', id: '考研' },
      { text: '考公', id: '考公' },
      { text: '入伍', id: '入伍' },
      { text: '春招', id: '春招' },
      { text: '秋招', id: '秋招' },
      { text: '社招', id: '社招' },
      { text: '竞赛', id: '竞赛' },
      { text: '转行中', id: '转行中' },
      { text: '跳槽', id: '跳槽' },
    ],
  },
  {
    text: '兴趣',
    children: [
      { text: '编程', id: '编程' },
      { text: '羽毛球', id: '羽毛球' },
      { text: '篮球', id: '篮球' },
      { text: '足球', id: '足球' },
      { text: '乒乓球', id: '乒乓球' },
      { text: '阅读', id: '阅读' },
      { text: '唱歌', id: '唱歌' },
      { text: '舞蹈', id: '舞蹈' },
      { text: '跑步', id: '跑步' },
      { text: '健身', id: '健身' },
      { text: '象棋', id: '象棋' },
      { text: '围棋', id: '围棋' },
      { text: '绘画', id: '绘画' },
      { text: '书法', id: '书法' },
      { text: '朗诵', id: '朗诵' },
    ],
  },
  {
    text: '状态',
    children: [
      { text: '乐观', id: '乐观' },
      { text: '悲伤', id: '悲伤' },
      { text: '佛系', id: '佛系' },
      { text: '待业', id: '待业' },
      { text: '已就业', id: '已就业' },
      { text: '找工作中', id: '找工作中' },
      { text: '单身', id: '单身' },
      { text: '恋爱中', id: '恋爱中' },
      { text: '已婚', id: '已婚' },
      { text: '有点丧', id: '有点丧' },
      { text: '摆烂', id: '摆烂' },
    ],
  },
]

//标签列表(响应式数组)
let tagList = ref(originTagList);

//删除标签
// @ts-ignore
const doClose = (tag) => {
  activeIds.value = activeIds.value.filter(item => {
    return item !== tag;
  })
}

//点击搜索跳转搜索结果(搜索出的用户列表)页面
/**
 * 执行搜索
 */
const doSearchResult = () => {
  router.push({
    path: '/user/list',
    query: {
      tags: activeIds.value,
      searchText: searchText.value
    }
  })
}

</script>


<style scoped>
/*设置透明度*/
#selectTags {
  opacity: 36%;
  font-size: 14px;
}
#keywordsSelectedTagsFontSize {
  font-size: 16px;
}
#keywordsSelectTagsFontSize {
  font-size: 16px;
}
#searchUserIcon {
  margin-top: 12px;
  padding-right: 3px;
}
</style>